<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>computed-计算属性</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px">
    <h3>computed-计算属性 </h3>
    <p>模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。</p>
    <p>推荐使用计算属性来描述依赖响应式状态的复杂逻辑。</p>
    <p>生日：{{birth}}</p>

    <h3>计算属性缓存 vs 方法 </h3>
    <p>若将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的， 然而，不同之处在于计算属性值会基于其响应式依赖被缓存。</p>
    <p>一个计算属性仅会在其响应式依赖更新时才重新计算。</p>


</div>
</body>

<script type="text/javascript">
    const author = "蚩尤后裔";

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        //组件选项
        // data 定义数据, html 中可以进行获取
        data() {
            return {
                author,
                birthday: 746208000000
            }
        },
        computed: {
            birth() {
                const date = new Date(this.birthday);
                const year = date.getFullYear();
                const moth = (date.getMonth() + 1) < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                return year + "-" + moth + "-" + day;
            }
        }

    });

    // 4、一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    // 5、与大多数应用方法不同的是 mount 不返回应用本身，而是返回的根组件实例(vm)
    const rootViewModel = App.mount("#rootApp");
    console.log(rootViewModel.author);

</script>
</html>
